<template>
    <div>
        <navtitle title="购物车"></navtitle>
        <!-- 渲染 https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg-->
        <div v-for="item in data">


            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="item.checked" style="margin-left: -10px;"></van-checkbox>
                            <img :src="item.goods.goods_big_logo" alt="" style="width: 80px; height: 100%;">
                        </div>
                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button"
                        style="height: 100%; margin-right: 3px;" @click="del(item.id)" />
                </template>
            </van-swipe-cell>
            <van-submit-bar :price="allPrice" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="allChecked">全选</van-checkbox>
            </van-submit-bar>
        </div>
    </div>
</template>

<script setup>
// 标题
import navtitle from '@/components/navtitle.vue';
import { useCounterStore } from '@/stores/cart'
import { computed, ref } from 'vue';
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
console.log(store.piniaData);

let data = ref([])
const cart = () => {
    data.value = store.piniaData
}
cart()
// 删除
const del = (id) => {
    store.piniaData = store.piniaData.filter((item) => item.id != id)
    cart()
}
// 总价
let allPrice = computed(() => {
    let allPrice = ref(0)
    let cart = data.value.filter((item) => item.checked)
    cart.forEach((item) => {
        allPrice.value += item.number * item.goods.goods_price
    })
    return allPrice.value * 100
})

// 全选
let allChecked = computed({
    get() {
        if (data.value.length == 0) {
            return false
        } else {
            return data.value.every((item) => item.checked == true)
        }
    },
    set(val) {
        data.value.forEach((item) => {
            item.checked = val
        })
    }
})
// 生成订单
import { createApi } from '@/api/api';
import { useRouter } from 'vue-router';
const router = useRouter()

import { showFailToast, showSuccessToast } from 'vant';
const onSubmit = () => {
    let cart = data.value.filter((item) => item.checked == true)
    console.log(cart);
    if (cart.length == 0) {
        showFailToast('请选择商品')
    } else {
        createApi({
            goodsIds: cart.map((item) => item.goods.id).join(''),
            username: localStorage.getItem('username'),
            product_code: '很好',
            totalPrice: allPrice.value,
            nums: cart.map((item) => item.number).join(',')
        }).then((res) => {
            console.log(res);
            showSuccessToast('订单生成成功')
            router.push('/create')
        })
    }


}
</script>

<style lang="scss" scoped></style>